<!-- 合同管理-合同列表页面 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-dropdown>
          <a-button type="primary">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新建合同</template>
          </a-button>
          <template #content>
            <!--------------------------------------------------------------------------------->
            <!-- <a-dgroup title="销售类合同">
              <a-doption
                v-for="(item, index) in contractType.sales"
                :key="index"
                >{{ item.name }}</a-doption
              >
            </a-dgroup>
            <a-dgroup title="采购类合同">
              <a-doption
                v-for="(item, index) in contractType.buys"
                :key="index"
                >{{ item.name }}</a-doption
              >
            </a-dgroup> -->
            <!--------------------------------------------------------------------------------->
            <a-dsubmenu value="销售类合同" trigger="hover">
              <template #default>销售类合同</template>
              <template #content>
                <a-doption
                  v-for="(item, index) in contractType.sales"
                  :key="index"
                  @click="addContract(item.id, 1)"
                  >{{ item.name }}</a-doption
                >
              </template>
            </a-dsubmenu>
            <a-dsubmenu value="采购类合同" trigger="hover">
              <template #default>采购类合同</template>
              <template #content>
                <a-doption
                  v-for="(item, index) in contractType.buys"
                  :key="index"
                  @click="addContract(item.id, 2)"
                  >{{ item.name }}</a-doption
                >
              </template>
            </a-dsubmenu>
          </template>
        </a-dropdown>
      </template>
    </pageHeader>
    <a-tabs lazy-load>
      <a-tab-pane key="1" title="销售类合同">
        <SalesContract />
      </a-tab-pane>
      <a-tab-pane key="2" title="采购类合同">
        <PurchaseContract />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { GetContractTypeSetting } from '@/api/contract-management/base-setting/type-contract/index';
  import { pageData as IpageData } from '@/types/global';
  import { formHeaderSetting } from '@/types/global';
  import SalesContract from './sales-contract/index.vue';
  import PurchaseContract from './purchase-contract/index.vue';

  const router = useRouter();
  const title = '合同列表';
  const breadCrumb = ['合同管理', '合同列表'];

  const headerSetting = reactive<formHeaderSetting>({
    list: [],
  });

  const contractType = reactive<any>({
    sales: [],
    buys: [],
  });

  // 点击新增合同
  // const add = (id: number): void => {
  //   router.push({
  //     name: 'AddContract',
  //     query: {
  //       type: 'add',
  //       id,
  //     },
  //   });
  // };
  const addContract = (id: number, idParent: number): void => {
    router.push({ name: 'AddContract', query: { type: 'add', id, idParent } });
  };

  onMounted(async () => {
    const res = await GetContractTypeSetting();
    contractType.sales = res.contractFrom;
    contractType.buys = res.contractType;
  });
</script>

<style scoped lang="less">
  :deep(.arco-tabs-content) {
    padding-top: 0px;
  }
</style>
